<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="mui/mui.min.css">
    <link rel="stylesheet" href="mui/mui.picker.min.css">
    <link rel="stylesheet" href="mui/mui.showLoading.css">
    <link rel="stylesheet" href="css/physicalPrize.css?20180821">
    <script src="js/flexible.js"></script>
    <title>具体信息</title>
    <style>
        [v-cloak] {
            visibility: hidden !important;
        }
    </style>
</head>

<body>
    <div id="app" class="app">
        <div>
            <div class="content">
                <div class="title">请截图保存此页面！</div>
                <div class="dialog_frame">
                    <div class="dislog_confrim">
                        <div class="logo">
                            <img src="img/t_logo.png" alt="">
                        </div>
                        <div class="title">恭喜你获得</div>
                        <div class="title_num">{{prize_num}}</div>
                    </div>
                </div>
                <div class="my_message">
                    <div class="message_line">
                        <p class="message_line_title">收件人姓名:</p>
                        <div class="input">
                            <input type="text" v-model.trim="info.address.name" readonly>
                        </div>
                    </div>
                    <div class="message_line">
                        <p class="message_line_title">联系电话:</p>
                        <div class="input">
                            <input type="text" v-model.trim="info.address.phone" readonly> 
                        </div>

                    </div>
                    <div class="message_line">
                        <p class="message_line_title">收件地址:</p>
                        <div class="input">
                            <textarea type="text" rows="2" v-model.trim="city" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <ul>
                    <li @click="share(true,0)">
                        <div class="title">
                            <img src="img/share1.png" alt="">
                        </div>
                        <div class="text share1">分享在抽奖</div>
                    </li>
                    <li @click="share(true,1)">
                        <div class="title">
                            <img src="img/wx1.png" alt="">
                        </div>
                        <div class="text ">关注长荣
                            <br/>微信公众号</div>
                    </li>
                    <li @click="jump('https://weibo.com/u/3483881701?refer_flag=1005055014_&is_hot=1')">
                        <div class="title">
                            <img src="img/xl1.png" alt="">
                        </div>
                        <div class="text">关注长荣
                            <br/>新浪微博</div>
                    </li>
                    <li @click="jump('http://www.ipeen.com.tw')">
                        <div class="title">
                            <img src="img/ipeen.png" alt="">
                        </div>
                        <div class="text ipeen">台湾热搜</div>
                    </li>
                </ul>
            </div>
            <div class="dialog" v-if="dialog" v-cloak>
                <div class="img">
                    <div class="close" @click="share(false)">
                        <img src="img/close.png" alt="">
                    </div>
                    <img :src="shareImg" alt="">
                    <p>请保存图片到系统相册，通知给好友一起抽奖吧</p>
                </div>
            </div>
        </div>
    </div>
    <script src="mui/mui.min.js"></script>
    <script src="mui/mui.showLoading.js"></script>
    <script src="mui/mui.picker.min.js"></script>
    <script src="mui/province.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            info: {
                address: {
                    address: "",
                    city_name: "",
                    country_name: "",
                    phone: "",
                    province_name: "",
                    name: "",
                    codeNum: ""
                }
            },
            goods: [],
            prize_num: '',
            dialog: false,
            theRequest: "",
            shareImg: 'img/share.png'
        },
        computed: {
            city() {
                if (this.info.address.province_name == undefined || this.info.address.city_name == undefined || this.info.address.country_name == undefined) {
                    return ""
                } else {
                    return this.info.address.province_name + this.info.address.city_name + this.info.address.country_name + this.info.address.address
                }
            },
        },
        methods: {
            geUrl: function () {
                var theRequest = {};
                var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            getMessage() {
                var pirzeMessage = JSON.parse(localStorage.getItem('pirzeMessage'));
                if (pirzeMessage !== null) {
                    var luck_draw_item_info = pirzeMessage.luck_draw_item_info;
                    var luck_draw_prize_info = pirzeMessage.luck_draw_record_info;
                    this.prize_url = luck_draw_item_info.prize_url;
                    this.prize_name = luck_draw_item_info.name;
                    this.prize_num = luck_draw_item_info.grade_name;
                    this.type = luck_draw_item_info.type;
                    this.message = luck_draw_item_info.wxplain;
                    this.id = luck_draw_prize_info.id;
                }
                var info = JSON.parse(localStorage.getItem('info'));
                if (info !== null) {
                    this.info.address.name = info.address.name;
                    this.info.address.address = info.address.address;
                    this.info.address.province_name = info.address.province_name;
                    this.info.address.city_name = info.address.city_name;
                    this.info.address.phone = info.address.phone;
                    this.info.address.country_name = info.address.country_name;
                    this.info.address.codeNum = info.address.codeNum;
                }
            },
            share(val, type) {
                var elm = document.getElementById('app');
                if (type == '0') {
                    this.shareImg = 'img/share1.jpg?20180822';
                    elm.style.overflow = 'hidden';
                } else if (type == "1") {
                    this.shareImg = 'img/share_w.png?20180822';
                    elm.style.overflow = 'hidden';
                }else{
                    elm.style.overflow = 'scroll';
                }
                this.dialog = val;
                // window.location.href = "share.html?id=" + this.theRequest.id + "&status=3&t=" + new Date().getTime();
            },
            jump(val) {
                window.location.href = val;
            },

        },
        mounted() {
            this.getMessage();
            this.theRequest = this.geUrl();
        }
    })
</script>

</html>